<template>
    <div class="approval_screen">
        <!-- 研发部门 -->
        <div v-if="(user.user.indexOf('inventStaff') == -1 && user.user.indexOf('inventGroup') == -1)"
            class="approval_screen_category" @click="investmentShow = true">
            {{ investmentName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 提交日期 -->
        <div class="approval_screen_date" @click="dateShow = true">
            {{ dateName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!--审批状态 -->
        <div @click="productcategoryShow = true">
            {{ investcategoryName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <slot></slot>
        <van-action-sheet title="研发部门" v-model:show="investmentShow" :actions="investmentList"
            @select="onSelectInvestment" />
        <van-action-sheet title="审批状态" v-model:show="productcategoryShow" :actions="productcategoryList"
            @select="onSelectProductCategory" />
        <van-action-sheet title="提交日期" v-model:show="dateShow" :actions="dateyList" @select="onSelectDate" />
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue'
import { getSystemList } from '@/api/approval/index'
import { userStore } from "@/store/user";
const dropDown = new URL("@/assets/approval/drop_down .png", import.meta.url).href
const user = userStore();
const props = defineProps({
    value: { type: Object, default: {} },
    title: { tyoe: String, default: '' }
})
const emit = defineEmits(['update:value', 'onSubmit'])

// 研发部门
const investmentName = ref('研发部门')
const investmentShow = ref(false)
const investmentList = ref([])
// 研发审批类型
const investcategoryName = ref('审批状态')
const productcategoryShow = ref(false)
const productcategoryList = ref([
    { name: '全部', status: '' },
    { name: '审批中', status: '0' },
    { name: '已通过', status: '2' },
    { name: '已驳回', status: '1' },
])
// 提交日期
const dateName = ref('提交日期')
const dateShow = ref(false)
const dateyList = ref([
    { name: "全部", status: null },
    { name: "近一周", status: 7 },
    { name: "近一月", status: 30 },
    { name: "近半年", status: 180 },
])

// 招商部门选择事件
const onSelectInvestment = (selection: any) => {
    investmentShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.recruiterDeptId = selection.status
    emit('update:value', params)
    emit('onSubmit')
}
/** 审批状态选择事件 */
const onSelectProductCategory = (selection: any) => {
    productcategoryShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.status = selection.status
    emit('update:value', params)
    emit('onSubmit')
}
/** 提交日期选择事件 */
const onSelectDate = (selection: any) => {
    dateShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.startTime = selection.status
    emit('update:value', params)
    emit('onSubmit')
}

watch(() => props.value, () => {
    // 研发部门
    let inv: any = investmentList.value.find((item: any) => {
        return item.status === props.value.recruiterDeptId
    })
    if (inv) {
        investmentName.value = inv.name === '全部' ? '研发部门' : inv.name
    } else {
        investmentName.value = '研发部门'
    }
    // 提交日期
    let datey = dateyList.value.find(item => {
        return item.status === props.value.startTime
    })
    if (datey) {
        dateName.value = datey.name === '全部' ? '提交日期' : datey.name
    } else {
        dateName.value = '提交日期'
    }
    // 研发审批类型
    let investcategory: any = productcategoryList.value.find((item: any) => {
        return item.status === props.value.status
    })
    if (investcategory) {
        investcategoryName.value = investcategory.name === '全部' ? '审批状态' : investcategory.name
    } else {
        investcategoryName.value = '审批状态'
    }
}, { deep: true, immediate: true })
/** 获取招商品类列表 */
const GetSystemList = async () => {
    const res = await getSystemList({ parentId: '1856176843717799937' })
    if (res.data.length) {
        res.data.forEach(item => {
            item.name = item.deptName
            item.status = item.deptId
            item.color = '#323233'
        })
        res.data.unshift({
            deptName: '全部',
            deptId: null,
            name: '全部',
            status: null,

        })
        investmentList.value = res.data
    }
}

onMounted(() => {
    GetSystemList()
})

</script>

<style lang="less" scoped>
.approval_screen {
    height: 44px;
    margin-bottom: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;

    :deep(.van-image) {
        width: 10px;
        height: 6px;
        margin-left: 4px;
    }

    .approval_screen_category {
        display: flex;
        align-items: center;
    }

    .approval_screen_date {
        display: flex;
        align-items: center;
    }
}
</style>